<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet"
          href="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/layuiadmin/layui/css/layui.css"
          media="all">
    <link rel="stylesheet"
          href="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/layuiadmin/style/admin.css"
          media="all">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_634575_0pyw672qrys98uxr.css"/>
    <link
            href="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/layuiadmin/style/get.css?ver=2015010514941530"
            rel="stylesheet"/>
    <link
            href="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/layuiadmin/style/shop.css?ver=2015010514941530"
            rel="stylesheet"/>
    <!-- 新增css -->
    <link href="./css/index.css" rel="stylesheet" type="text/css">
    <script
            src="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/js/common/libs/jquery/jquery-1.11.0.min.js">
    </script>
    <script src="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/layuiadmin/layui/layui.js">
    </script>
    <script
            src="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/layuiadmin/lib/init.js?ver=2015010514941530">
    </script>
    <script
            src="http://shop120.oss-cn-shenzhen.aliyuncs.com/static/business/manage/layuiadmin/lib/get.js?ver=2015010514941530">
    </script>
    <script src="http://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script src="https://maplemei.gitee.io/xm-select/xm-select.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div class="layui-fluid">
    <symbol id="move">
    </symbol>
    <div class="">
        <div class="layui-card-body" style="padding: 0px;">
            <form class="layui-form" action="Add.html" lay-filter="component-form-group">
                <input type="hidden" name="BackUrl"/>
                <input name="ID" type="hidden" value="0"/>
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md8">
                        <!--                        标题 + 描述-->
                        <div class="layui-card">
                            <div class="layui-card-header">商品名称</div>
                            <div class="layui-card-body layui-row layui-col-space10">
                                <div class="layui-col-md12">
                                    <input type="text" name="Title" placeholder="请输入商品名称" class="layui-input"/>
                                </div>
                            </div>
                            <div class="">
                                <div class="layui-card-header">描述</div>
                                <div class="layui-card-body layui-row layui-col-space10">
                                    <div class="layui-col-md12">
                                        <!-- 加载编辑器的容器 -->
                                        <script id="container" name="content" type="text/plain">
                                        </script>
                                        <style>
                                            #edui1 {
                                                width: 100% !important;
                                            }
                                        </style>
                                        <!-- 配置文件 -->
                                        <script type="text/javascript" charset="UTF-8"
                                                src="js/ueditor/ueditor.config.js"></script>
                                        <!-- 编辑器源码文件 -->
                                        <script type="text/javascript" charset="UTF-8"
                                                src="js/ueditor/ueditor.all.js"></script>
                                        <!--引入样式-->
                                        <link rel="stylesheet"
                                              href="/js/ueditor/themes/default/css/ueditor.css"/>
                                        <script>
                                            var ue = UE.getEditor('container')
                                        </script>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--                        媒体文件上传-->
                        <div class="layui-card">
                            <div class="layui-card-header">媒体文件</div>
                            <div class="layui-card-body layui-row layui-col-space10">
                                <div id="more_img_list" class="layui-col-space10"></div>
                                <div class="layui-col-xs layui-col-xs4 blue-background-class">
                                    <div class="layui-upload-drag " id="test-upload-drag"
                                         style="display: flex;padding:0px;flex-direction: column;">
                                        <i class="layui-icon"></i>
                                        <p style="padding-top: 10px;">点击上传，或将文件拖拽到此处</p>
                                    </div>
                                    <input class="layui-upload-file" type="file" accept="" name="file">
                                </div>
                            </div>
                        </div>

                        <!--                        定价-->
                        <div class="layui-card">
                            <div class="layui-card-header">定价</div>
                            <div class="layui-card-body layui-row layui-col-space10">
                                <div class="layui-col-md6">
                                    <div class="input_title">价格</div>
                                    <div class="input_price">
                                        <span>¥</span>
                                        <input type="text" name="title" placeholder="0.00" autocomplete="off"
                                               class="layui-input number" lay-verify="weight">
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="input_title">原价</div>
                                    <div class="input_price">
                                        <span>¥</span>
                                        <input type="text" name="title" placeholder="0.00" autocomplete="off"
                                               class="layui-input number">
                                    </div>
                                </div>
                                <div class="layui-col-md12">
                                    <input type="checkbox" name="like1[write]" lay-skin="primary" title="需要收税"
                                           checked="">
                                </div>
                            </div>
                            <div class="layui-col-splite"></div>
                            <div class="layui-card-body layui-row layui-col-space10">
                                <div class="layui-col-md12">
                                    <div class="input_title">成本价</div>
                                    <div class="input_price">
                                        <span>¥</span>
                                        <input type="text" name="title" placeholder="0.00" autocomplete="off"
                                               class="layui-input number">
                                    </div>
                                </div>
                                <div class="layui-col-md12">
                                    客户不会看到此信息
                                </div>
                            </div>
                        </div>

                        <!--库存-->
                        <div class="layui-card">
                            <div class="layui-card-header">库存</div>
                            <div class="layui-card-body layui-row layui-col-space10">
                                <div class="layui-col-md6">
                                    <div class="input_title">SKU（货号）</div>
                                    <input type="text" name="title" placeholder="" autocomplete="off"
                                           class="layui-input">
                                </div>
                                <div class="layui-col-md6">
                                    <div class="input_title">条码（ISBN、UPC、GTIN 等）</div>
                                    <input type="password" name="title" placeholder="" autocomplete="off"
                                           class="layui-input">
                                </div>
                                <div class="layui-col-md12">
                                    <input type="checkbox" name="test[write]" lay-filter="testnum"
                                           lay-skin="primary" id="key_service" title="跟踪数量">
                                </div>
                                <div class="layui-col-md12" id="key_service2" style="display: none;">
                                    <input type="checkbox" name="test[write]" lay-skin="primary" title="缺货后继续销售"
                                           checked="">
                                </div>
                            </div>
                            <div class="layui-col-splite"></div>
                            <div class="layui-card-body layui-row layui-col-space10 pb0  ">
                                <div class="input-title">数量</div>
                                <div class="layui-col-md12">
                                    <div class="input_title input_title_mb0 layui-col-xs6">地点名称</div>
                                    <div class="input_title  input_title_mb0 layui-col-xs6">可用</div>
                                </div>
                            </div>
                            <div class="layui-col-splite"></div>
                            <div class="layui-card-body layui-row layui-col-space10 ">
                                <div class="layui-col-md12 ">
                                    <div class="input_title layui-col-xs6 layui-dc ">清湖路乐安大厦窝趣社区</div>
                                    <div class="input_title layui-col-xs5">
                                        <input type="number" name="title" placeholder="" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!--                        发货-->
                        <div class="layui-card">
                            <div class="layui-card-header">发货</div>
                            <div class="layui-card-body layui-row layui-col-space10">
                                <div class="">
                                    <input type="checkbox" name="like1[write]" lay-filter="haveshopping"
                                           lay-skin="primary" title="需要运输">
                                </div>
                                <div class="layui-col-splite"></div>
                                <div class="noshopping" id="noshipping">
                                    购买此产品时，客户不会输入他们的送货地址或选择送货方式。
                                </div>
                                <div class="hasshopping" id="haveshipping">
                                    <div class="layui-col-md6">
                                        <div class="input_title">重量</div>
                                        用于在结账时计算运费以及在订单发货过程中标记价格。
                                    </div>

                                    <div class="layui-col-md12">
                                        <div class="input_title" style="font-weight: normal;">重量</div>
                                        <div class="layui-inline">
                                            <input type="number" name="title" placeholder="0.0"
                                                   autocomplete="off" class="layui-input">
                                        </div>
                                        <div class="layui-inline">
                                            <div class="select-inner">
                                                <select name="interest" lay-filter="aihao" class="select-item"
                                                        lay-ignore>
                                                    <option value="POUNDS">磅</option>
                                                    <option value="OUNCES">盎司</option>
                                                    <option value="KILOGRAMS">千克</option>
                                                    <option value="GRAMS">克</option>
                                                </select>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>
                            <div class="layui-col-splite hasshopping"></div>
                            <div class="hasshopping layui-card-body layui-row layui-col-space10 ">
                                <div class="input-title">海关信息</div>
                                <div class="input-title">进行国际运输时，海关部门使用此信息计算关税。在打印的海关单据上显示。</div>
                                <div class="layui-col-md12">
                                    <div class="input_title">发货国家/地区</div>
                                    <div class="input_title">
                                        <select id="PolarisSelect36" class="Polaris-Select__Input_30ock"
                                                aria-invalid="false" aria-describedby="PolarisSelect36HelpText">
                                            <option value="" disabled="">选择国家/地区</option>
                                            <option value="BT">不丹</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md12">
                                    <div class="input_title">HS（协调制度）代码</div>
                                    <div class="input_title">
                                        <input type="text" name="title" placeholder="用户名" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                    <div>手动输入超过 6 位数的数字编码。</div>
                                </div>
                            </div>
                        </div>

                        <!--                        选项-->
                        <div class="layui-card ">
                            <div class="layui-card-header">选项</div>
                            <div class="layui-card-body layui-row layui-col-space10">
                                <div class="layui-col-md12 ">
                                    <input type="checkbox" name="checkbox_v1" value="checkbox_v复选"
                                           class="specs checkbox_v1" lay-filter="specs" lay-skin="primary"
                                           title="此产品包含选项，例如大小或颜色">
                                </div>
                                <div class="specs-options layui-col-md12 ">
                                    <div id="last">
                                        <div class="layui-col-md12 specs-list ">
                                            <div class="layui-form-item ">
                                                <label class="layui-form-label labe-block">选项名称</label>
                                                <div class="layui-input-block input-block">
                                                    <div class="layui-form">
                                                        <select name="city" lay-verify="" lay-filter="test"
                                                                id="select">
                                                            <option value="001">尺寸</option>
                                                            <option value="002">颜色</option>
                                                            <option value="003">材料</option>
                                                            <option value="004">样式</option>
                                                        </select>
                                                    </div>
                                                    <div class="layui-button">
                                                        <button type="button"
                                                                class="layui-btn layui-btn-normal layui-btn removeclass">
                                                            <i
                                                                    class="layui-icon"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label labe-block">选项值</label>
                                                <div class="layui-input-block input-block w92">
                                                    <input type="text" name="username" value='中'
                                                           lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？"
                                                           placeholder="请输入" autocomplete="off"
                                                           class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-finish" style="left: 0;">
                                                <button class="layui-btn" lay-submit=""
                                                        lay-filter="component-form">完成
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-add-card" id="add">
                                        <span class="add">+</span>
                                        添加其他选项
                                    </div>
                                </div>

                            </div>
                        </div>

                        <!--                        多属性-->
                        <div class="layui-card">
                            <div class="layui-card-header">多属性</div>
                            <div class="layui-card-body layui-row layui-col-space10">

                                <div class="card-attribute">
                                    <div class="layui-form-item layui-inline card-attr-item">
                                        选择
                                    </div>
                                    <div class="layui-form-item layui-inline color-bule card-attr-item">
                                        所有
                                    </div>
                                    <div class="layui-form-item layui-inline color-bule card-attr-item">
                                        无
                                    </div>
                                    <div class="layui-form-item layui-inline color-bule card-attr-item">
                                        <div class="dropdown">
                                            <div onclick="myFunction()" class="dropbtn">
                                                颜色
                                                <i class="layui-icon layui-icon-down"
                                                   style="font-size: 13px;font-weight: bold; color: #2C6ECB;"></i>
                                            </div>
                                            <div id="myDropdown" class="dropdown-content">
                                                <input type="checkbox" name="like1[write]" lay-filter=""
                                                       lay-skin="primary" title="黑色">
                                                <input type="checkbox" name="like1[write]" lay-filter=""
                                                       lay-skin="primary" title="绿色">
                                                <input type="checkbox" name="like1[write]" lay-filter=""
                                                       lay-skin="primary" title="黑色">
                                            </div>
                                        </div>
                                        <script>
                                            // 多属性规格
                                            /*点击按钮，下拉菜单在显示/隐藏之间切换*/
                                            function myFunction() {
                                                console.log($("#myDropdown").classList, 'oo')
                                                $("#myDropdown").show();
                                                //如果myDropdown元素有show的class时，
                                                //删除show；如果没有，则增加show的class。即toggle的反转操作。
                                            }

                                            //点击下拉菜单以外区域隐藏
                                            window.onclick = function (event) {
                                                if (!event.target.matches('.dropbtn')) {
                                                    var dropdowns = $(".dropdown-content");
                                                    var i;
                                                    for (i = 0; i < dropdowns.length; i++) {
                                                        var openDropdown = dropdowns[i];
                                                        if (openDropdown.classList.contains('show')) {
                                                            openDropdown.classList.remove('show'); //利用了CSS中.show的显示菜单样式
                                                        }
                                                    }
                                                }
                                            }
                                        </script>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-container2">
                                <table class="layui-hide" id="table_user" lay-filter="test"></table>
                                <script type="text/html" id="actionBar">
                                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                                </script>
                                <script type="text/html" id="priceTemplet">
                                    <div class="input_price" style="height: 40px;border-color: #D3D6DA;">
                                        <span>¥</span>
                                        <input type="number" name="title" placeholder="0.00" class="layui-input number"
                                               value="{{d.id}}">
                                    </div>
                                </script>
                                <script type="text/html" id="skuTemplet">
                                    <input class="user_list_username layui-input" size="9" name="{{d.id}}"
                                           data-id="{{d.id}}"
                                           value="{{d.id}}"/>
                                </script>
                                <script type="text/html" id="totalTemplet">
                                    <input type="number" name="title" placeholder="0" autocomplete="off"
                                           class="layui-input">
                                </script>
                                <script type="text/html" id="codeTemplet">
                                    <input class="user_list_username layui-input" size="9" name="{{d.id}}"
                                           data-id="{{d.id}}"
                                           value="{{d.id}}"/>
                                </script>
                            </div>
                            <script>
                                layui.use(['table', 'element'], function () {
                                    table = layui.table;
                                    //执行一个 table 实例
                                    table.render({
                                        elem: '#table_user',
                                        height: 320,
                                        data: [{
                                            "id": 10112,
                                            "sex": "女",
                                            "city": "2434",
                                            "sign": "243",
                                            "experience": 430,
                                        }, {
                                            "id": 10113,
                                            "sex": "243",
                                            "city": "2344",
                                            "sign": "2443",
                                            "experience": 139,
                                        }, {
                                            "id": 10114,
                                            "sex": "24324",
                                            "city": "24354",
                                            "sign": "23433",
                                            "experience": 598,
                                        }, {
                                            "id": 10115,
                                            "sex": "女",
                                            "city": "99",
                                            "sign": "555",
                                            "experience": 512,
                                        }, {
                                            "id": 10116,
                                            "sex": "55",
                                            "city": "555",
                                            "sign": "3555",
                                            "experience": 537,
                                        }],
                                        title: '用户表',
                                        page: false //开启分页
                                        ,
                                        toolbar: '#toolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                                        ,
                                        totalRow: false, //开启合计行
                                        limit: 3, //设置每页显示条数,根据自己项目情况去设置
                                        limits: [1, 2, 3] //设置每页条数下拉框的选择项,就是分页那一栏的下拉框选项
                                        ,
                                        cols: [
                                            [ //表头
                                                {
                                                    type: 'checkbox',
                                                    fixed: 'left'
                                                }, {
                                                fixed: 'left',
                                                field: 'city',
                                                title: '多属性',
                                                minWidth: 200
                                            }, {
                                                field: 'id',
                                                title: '价格',
                                                minWidth: 150,
                                                templet: '#priceTemplet'
                                            }, {
                                                field: 'score',
                                                title: '数量',
                                                minWidth: 150,
                                                templet: '#totalTemplet'
                                            }, {
                                                field: 'experience',
                                                title: 'sku',
                                                minWidth: 150,
                                                templet: '#skuTemplet'
                                            }, {
                                                field: 'city',
                                                title: '条码',
                                                minWidth: 150,
                                                align: "left",
                                                templet: '#codeTemplet'
                                            }, , {
                                                fixed: 'right',
                                                minWidth: 101,
                                                align: 'center',
                                                toolbar: '#actionBar'
                                            }
                                            ]
                                        ],
                                        size: 'lg'
                                    });
                                    //监听头工具栏事件
                                    table.on('toolbar(test)', function (obj) {
                                        var checkStatus = table.checkStatus(obj.config.id),
                                            data = checkStatus.data; //获取选中的数据
                                        switch (obj.event) {
                                            case 'mult-del':
                                                if (data.length === 0) {
                                                    layer.msg('请至少选择一行');
                                                } else {
                                                    layer.confirm('真的删除选择行吗', function (index) {
                                                        var result = [];
                                                        for (var i in data) {
                                                            result.push(data[i]['id']);
                                                        }
                                                        //关闭弹窗
                                                        layer.close(index);
                                                        layer.alert("您选择了删除这些id:" + JSON.stringify(result) +
                                                            ",使用ajax 发送这些数据给后端就行了")

                                                    });
                                                }
                                                break;
                                        }
                                        ;
                                    });

                                    //监听行工具事件
                                    table.on('tool(test)', function (obj) {
                                        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                                        var data = obj.data //获得当前行数据
                                            ,
                                            layEvent = obj.event; //获得 lay-event 对应的值

                                        if (layEvent === 'detail') {
                                            //内嵌iframe加载自己的详情页面地址
                                            openFrame("https://www.baidu.com/baidu?word=" + data.username +
                                                "&ie=utf-8&tn=maxco3_dg&ch=1")
                                        } else if (layEvent === 'del') {
                                            layer.confirm('删除行么', function (index) {
                                                obj.del(); //删除对应行（tr）的DOM结构
                                                layer.close(index);
                                            });
                                        } else if (layEvent === 'edit') {
                                        } else if (layEvent === 'comment') {
                                            //免加载页面弹窗
                                            addComment(data.id, data.username)
                                        }
                                    });
                                })
                                /**
                                 * 备注功能(在点击事件中调用此函数即可,或在标签中onclick属性直接调用)
                                 * @param {Object} user_id 用户id
                                 */
                            </script>

                        </div>

                        <!--                        搜索引擎优化-->
                        <div class="layui-card">
                            <div class="layui-card-header">搜索引擎优化<span class="header-right product-seo-hide"
                                                                       onclick="$('#product-seo').show();$('.product-seo-hide').hide();">编辑网站搜索引擎优化</span>
                            </div>
                            <div class="layui-card-body layui-row layui-col-space10">
                                <div class="layui-col-md12 product-seo-hide">
                                    添加产品的标题和标签描述进行搜索引擎优化。
                                </div>
                                <div id="product-seo" style="display:none;">
                                    <div class="layui-col-md12">
                                        <div class="input_title">页面标题</div>
                                        <input type="text" name="title" placeholder="请输入页面标题" autocomplete="off"
                                               class="layui-input "
                                               onkeyup="javascript:texLength(this, 70, 'title_length');">
                                        <div class="input_remark">使用的字符长度 <span id="title_length">0</span>/70
                                        </div>
                                    </div>
                                    <div class="layui-col-md12">
                                        <div class="input_title">元描述</div>
                                        <textarea name="" placeholder="请输入元描述" maxlength="11111111"
                                                  onkeyup="javascript:texLength(this, 320, 'remark_length');"
                                                  class="layui-textarea"></textarea>

                                        <div class="input_remark">使用的字符长度 <span id="remark_length">0</span>/320
                                        </div>
                                    </div>
                                    <div class="layui-col-md12">
                                        <div class="input_title">URL handle</div>
                                        <div class="input_price" style="justify-content:start;">
													<span
                                                            style="padding-right:0px;">http://my-ttx-shop.myshopify.com/products/</span>
                                            <input type="text" name="title" placeholder="" style="width:auto;"
                                                   autocomplete="off" class="layui-input ">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--                        元字段-->
                        <div class="layui-card">
                            <div class="layui-card-header" id="word">元字段
                                <span class=" header-right field-hide" style="display:none"
                                      onclick="$('.card-popover-box').hide();$('.field-hide').hide();">
										关闭
										</span>
                            </div>
                            <div class="field-card">
                                <div class="field-card-item">
                                    <button type="button" onclick="$('#card-popover-box').show();$('#card-popover2').hide();
											$('.field-hide').show();" class="button-crad">
                                        <div class="crad-cont ">
                                            <div class="crad-cont-text layui-col-md4">
                                                <span class="title">123123123</span>
                                            </div>
                                            <div class="crad-cont-box layui-col-md7">
                                                <input type="" name="" value=""/>
                                            </div>
                                        </div>
                                    </button>
                                    <div class="card-popover-box" style="display: none;" id="card-popover-box">
                                        <div class="card-popover">
                                            <div
                                                    class="popover-field layui-card-body layui-row layui-col-space20">
                                                <div class="popover-field-left layui-col-md4 ">
                                                    <div class="popover-field-text">
                                                        <div class="field-text-title">123123123</div>
                                                        <div class="field-text-title field-text-title2">多行文本
                                                        </div>
                                                        <div class="field-text-title field-text-title2">123123
                                                        </div>
                                                    </div>
                                                    <div class="field-text-link"><a
                                                            class="polaris-link">前往定义</a>
                                                    </div>
                                                </div>
                                                <div class="popover-field-rigth layui-col-md8">
                                                    <div class="popover-field-main layui-col-md11">
																<textarea placeholder="" style="min-height: 106px;"
                                                                          maxlength="11111111"
                                                                          onkeyup="texLength(this, 11111111, 'textarea_length');"
                                                                          name="desc" class="layui-textarea"
                                                                          id="myText1"></textarea>
                                                        <div class="word"><span class="text_count"
                                                                                id="textarea_length">0</span>&nbsp;/&nbsp;<span
                                                                class="num_count" id="numCount1">11111111</span>
                                                        </div>
                                                    </div>
                                                    <div class="layui-col-md1 popover-reset">
                                                        <span onclick="clear_content1()">清除</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="field-card-item">
                                    <button id="metafields" type="button"
                                            onclick="$('#card-popover2').show();$('.field-hide').show();"
                                            class="button-crad">
                                        <div class="crad-cont ">
                                            <div class="crad-cont-text layui-col-md4">
                                                <span class="title">我是多行文本</span>
                                            </div>
                                            <div class="crad-cont-box layui-col-md7">
                                                <input type="" name="" id="" value=""/>
                                            </div>
                                        </div>
                                    </button>
                                    <div class="card-popover-box" style="display: none;top: 0px;"
                                         id="card-popover2">
                                        <div class="card-popover">
                                            <div
                                                    class="popover-field layui-card-body layui-row layui-col-space20">
                                                <div class="popover-field-left layui-col-md4 ">
                                                    <div class="popover-field-text">
                                                        <div class="field-text-title">我是多行文本3</div>
                                                        <div class="field-text-title field-text-title2">多行文本
                                                        </div>
                                                        <div class="field-text-title field-text-title2">我是多行文本
                                                        </div>
                                                    </div>
                                                    <div class="field-text-link"><a
                                                            class="polaris-link">前往定义</a>
                                                    </div>
                                                </div>
                                                <div class="popover-field-rigth layui-col-md8">
                                                    <div class="popover-field-main layui-col-md11">
																<textarea placeholder="" style="min-height: 106px;"
                                                                          maxlength="11111111"
                                                                          onkeyup="javascript:texLength(this, 11111111, 'textarea_length1');"
                                                                          name="desc" class="layui-textarea"
                                                                          id="myText"></textarea>
                                                        <div class="word"><span class="text_count"
                                                                                id="textarea_length1">0</span>&nbsp;/&nbsp;<span
                                                                class="num_count" id="numCount">11111111</span>
                                                        </div>
                                                    </div>
                                                    <div class="layui-col-md1 popover-reset">
                                                        <span onclick="clear_content()">清除</span>
                                                    </div>
                                                </div>
                                                <script>
                                                    layui.use('layer', function () {
                                                        var layer = layui.layer;
                                                    });

                                                    // 清楚文本框内容
                                                    function clear_content() {
                                                        document.getElementById("myText").value = "";
                                                        var content = document.getElementById('myText').value;
                                                        console.log(content, 'pp')
                                                    }

                                                    // 清楚文本框内容
                                                    function clear_content1() {
                                                        document.getElementById("myText1").value = "";
                                                        var content = document.getElementById('myText').value;
                                                        console.log(content, 'pp')
                                                    }

                                                    // 文本区域监听内容
                                                    function texLength(obj, maxlength, id) {
                                                        var curr = obj.value.length;
                                                        console.log(curr, 'opp')
                                                        if (curr > maxlength) {
                                                            layer.msg('字数在' + maxlength + '字以内');
                                                        } else {
                                                            document.getElementById(id).innerHTML = curr;
                                                        }
                                                    }
                                                </script>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!--                    右侧栏目-->
                    <div class="layui-col-md4">
                        <!--                        产品状态-->
                        <div class="layui-card">
                            <div class="product-state">
                                <div class="layui-card-header">产品状态</div>
                                <div class="layui-card-body layui-row layui-col-space10">
                                    <div class="layui-col-md12">
                                        <select name="dp" id="dp" lay-verify="required" lay-filter="xmFilter">
                                            <option value="ACTIVE">活跃</option>
                                            <option value="DRAFT">草稿</option>
                                        </select>
                                        <script>
                                        </script>
                                        <div class="product-state" id="SelectHelpText">
                                            此产品将在所有销售渠道中被隐藏。
                                            <!-- 此产品将向 5 个销售渠道提供。 -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="product-state">
                                <div class="layui-card-header">销售渠道和应用</div>
                                <div class="product-select layui-card-body layui-row ">
                                    <div class="product-selectAll">
                                        <input type="checkbox" lay-skin="primary" lay-filter="select_all"
                                               class="select_all" id="select_all" title="全选">

                                    </div>
                                    <div class="product-check">
                                        <input type="checkbox" name="police_id" lay-skin="primary" lay-filter="select_single" class="select_single " title="在线商店" value="10001">
                                        <p class="select_all_text" style="display: block" onclick="initShelfDate()">指定产品上架日期</p>
                                    </div>
                                    <div class="product-check">
                                        <input type="checkbox" name="police_id" lay-skin="primary"
                                               lay-filter="select_single" class="select_single" title="Facebook"
                                               value="10001">
                                    </div>
                                    <div class="product-check">
                                        <input type="checkbox" name="police_id" lay-skin="primary"
                                               lay-filter="select_single" class="select_single" title="Google"
                                               value="10001">
                                    </div>
                                    <div class="product-check">
                                        <input type="checkbox" name="police_id" lay-skin="primary"
                                               lay-filter="select_single" class="select_single" title="POS"
                                               value="10001">
                                    </div>
                                    <div class="product-check">
                                        <input type="checkbox" name="police_id" lay-skin="primary"
                                               lay-filter="select_single" class="select_single" title="Buy Button"
                                               value="10001">
                                    </div>
                                </div>
                                <!-- </div> -->
                            </div>
                            <script>
                                layui.use(['form', 'jquery'], function () {
                                    var form = layui.form;
                                    var $ = layui.jquery;
                                    //全选
                                    form.on('checkbox(select_all)', function (data) {
                                        var a = data.elem.checked;
                                        var parent = data.elem.parentNode;
                                        if (a == true) {
                                            $(parent).siblings(".product-check").children(".select_single").prop("checked",
                                                true);
                                            $('#select_all').attr('title', '取消全选');
                                            form.render('checkbox');

                                            console.log(2)
                                        } else {
                                            $(parent).siblings(".product-check").children(".select_single").prop("checked",
                                                false);
                                            $('#select_all').attr('title', '全选');
                                            form.render('checkbox');

                                            console.log(3)
                                        }

                                    });

                                    //有一个未选中全选取消选中
                                    form.on('checkbox(select_single)', function (data) {
                                        var parent = data.elem.parentNode.parentNode;
                                        var item = $(parent).children().children(".select_single");
                                        console.log()
                                        for (var i = 0; i < item.length; i++) {
                                            if (item[i].checked == false) {
                                                $(parent).children(".select_all").prop("checked", false);
                                                $('#select_all').attr('title', '全选');
                                                form.render('checkbox');
                                                break;
                                            }
                                        }
                                        // if ($('.product-select').find('.product-check:first').checked == true) {
                                        //     console.log('pp')
                                        // }
                                        //如果都勾选了  勾上全选
                                        var all = item.length;
                                        for (var i = 0; i < item.length; i++) {
                                            if (item[i].checked == true) {
                                                all--;
                                            }
                                        }
                                        if (all == 0) {
                                            $(parent).children(".product-selectAll").children(".select_all").prop("checked",
                                                true);
                                            $('#select_all').attr('title', '取消全选');
                                            form.render('checkbox');
                                        }
                                    });
                                })
                            </script>
                        </div>

                        <!--                        产品整理-->
                        <div class="layui-card">
                            <div class="layui-card-header">产品整理</div>
                            <div class="layui-card-body layui-row layui-col-space15">
                                <div class="layui-col-md12 ">
                                    <div class="tag-labe-text">类型</div>
                                    <select name="" id="template" lay-verify="required" lay-filter="xmFilter">
                                        <option value="1">Default product</option>
                                    </select>
                                </div>
                                <div class="layui-col-md12">
                                    <div class="tag-labe-text">厂商</div>
                                    <div class="layui-form-items">
                                        <div id="demo2"></div>
                                    </div>
                                    <!-- <select name="" id="template" lay-verify="required" lay-filter="xmFilter">
                                        <option value="1"> Default product </option>
                                    </select> -->
                                </div>
                                <div class="layui-col-md12">
                                    <div class="tag-labe-text">产品系列</div>
                                    <div class="layui-form-item">
                                        <div id="demo1"></div>
                                    </div>
                                    <div class="tags-box" style="margin-top:0">
                                        <div class="layui-inline tags-box-item">
                                            <span>dsds</span>
                                            <i class="layui-icon  layui-icon-close "
                                               style="font-size: 14px;font-weight: 600; color: #333;padding-left:2px"></i>
                                        </div>
                                        <div class="layui-inline tags-box-item">
                                            <span>3344</span>
                                            <i class="layui-icon  layui-icon-close "
                                               style="font-size: 14px;font-weight: 600; color: #333;padding-left:2px"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md12">
                                    <div class="layui-row">
                                        <div class="layui-col-md9">
                                            标签
                                        </div>
                                        <div class="layui-col-md3 tag-title" onclick="addComment(456,'刘皇叔')"
                                             id='one'>
                                            管理
                                        </div>
                                    </div>
                                    <script>
                                        /**
                                         * 备注功能(在点击事件中调用此函数即可,或在标签中onclick属性直接调用)
                                         * @param {Object} user_id 用户id
                                         */
                                        function addComment(user_id, username = "") {
                                            layui.use(['layer', 'laytpl'], function () {
                                                var $ = layui.$
                                                var layer = layui.layer,
                                                    laytpl = layui.laytpl;
                                                //给模板 tpl-user 传递参数
                                                var tpldata = {
                                                    "user_id": user_id,
                                                    "username": username ? username : "88",
                                                    "content": "",
                                                };
                                                //获取id为tpl-user的noscript标签的html内容,不能使用innerHtml
                                                laytpl(document.getElementById('tpl-user').innerText)
                                                    .render(tpldata, function (html) {
                                                        //渲染完成后直接打开
                                                        layer.open({
                                                            type: 1,
                                                            shade: false,
                                                            area: ['65%', '50%'],
                                                            title: false, //不显示标题
                                                            content: html,
                                                        });
                                                    });
                                            });

                                        }

                                        function closeComment() {
                                            window.parent.location.reload(); //刷新父页面
                                            parent.layer.close(index); //关闭弹出层

                                        }
                                    </script>
                                    <div class="layui-form-item">
                                        <select name="" id="template" lay-verify="required"
                                                lay-filter="xmFilter">
                                            <option value="1">Default product</option>
                                        </select>
                                    </div>
                                    <div class="tags-box">
                                        <div class="layui-inline tags-box-item">
                                            <span>dsds</span>
                                            <i class="layui-icon  layui-icon-close "
                                               style="font-size: 14px;font-weight: 600; color: #333;padding-left:2px"></i>
                                        </div>
                                        <div class="layui-inline tags-box-item">
                                            <span>3344</span>
                                            <i class="layui-icon  layui-icon-close "
                                               style="font-size: 14px;font-weight: 600; color: #333;padding-left:2px"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--                        在线商店-->
                        <div class="layui-card">
                            <div class="layui-card-header">在线商店</div>
                            <div class="layui-card-body layui-row layui-col-space10">
                                <div class="layui-col-md12">
                                    <div class="tag-labe-text">模板样式</div>
                                    <select name="" id="template" lay-verify="required" lay-filter="xmFilter">
                                        <option value="1">Default product</option>
                                    </select>
                                    <div class="labe-help-text" id="Select2HelpText">
                                        指定当前商店模板中的一个产品模板，以定义产品的显示方式。
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0;z-index:999">
                            <button class="layui-btn" lay-submit="" lay-filter="component-form">确定</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>
</body>
<!-- 标签管理弹窗 -->
<noscript id="tpl-user">
    <div class="layui-card" id="userinfo" style="box-shadow: none;">
        <div class="layui-card-header">
            <div class="layui-row">
                <div class="layui-col-md9">
                    管理
                </div>
                <div class="layui-col-md3 tag-title" onclick="closeComment()">
                    关闭
                </div>
            </div>
        </div>
        <form class="layui-form" action="" lay-filter="info">
            <div class="layui-card-body layui-row tag-card">
                <div class="layui-form-item">
                    <div class="layui-row ">
                        <div class="layui-row input-tags layui-col-md9">
                            <i class="layui-icon  layui-icon-search layui-col-md1"
                               style="font-size: 20px; color: #d6d6d6;padding-left:10px"></i>
                            <div class="layui-col-md9">
                                <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？"
                                       placeholder="请输入" autocomplete="off" value="{{d.username}}"
                                       class="layui-input ">
                            </div>
                        </div>
                        <div class=" layui-col-md3 select-tag">
                            <select name="interest" lay-filter="aihao">
                                <option value="0">按字母顺序</option>
                                <option value="1">常用</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="tag-list">
                    <div class="tag-list-item">
                        <div class="tag-list-txt">已选</div>
                        <div class="layui-blcok">
                            <input type="checkbox" checked="" name="police_id" lay-skin="primary"
                                   lay-filter="select_tag1" class="select_tag1" title="123">
                        </div>
                    </div>
                </div>
                <div class="tag-list-item">
                    <div class="tag-list-txt">可用</div>
                    <div class="layui-blcok">
                        <input type="checkbox" name="police_id" lay-skin="primary" lay-filter="select_tag1"
                               class="select_tag1" title="123">
                    </div>
                    <div class="layui-blcok">
                        <input type="checkbox" name="police_id" lay-skin="primary" lay-filter="select_tag1"
                               class="select_tag1" title="123">
                    </div>
                    <div class="layui-blcok">
                        <input type="checkbox" name="police_id" lay-skin="primary" lay-filter="select_tag1"
                               class="select_tag1" title="123">
                    </div>
                </div>
            </div>
            <div class="layui-form-item from-btns">
                <div class="layui-input-block">
                    <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                    <button type="submit" class="layui-btn tt" lay-submit="" lay-filter="demo1">完成</button>
                </div>
            </div>
        </form>
        <!-- 下方script标签中不能使用单行注释语句,否则laytpl编译解析会报错-->
        <!-- 语句之间也要严格用分号隔开,因为laytpl编译时,那些换行都被去掉了,导致代码连在一起 -->
        <script>
            layui.use(['jquery', 'form'], function () {
                var $ = layui.$;
                var form = layui.form,
                    layer = layui.layer,
                    laydate = layui.laydate;
                $('.layui-btn.tt').on('click', function () {
                    console.log(121212)
                });
                form.verify({
                    contentRule: function (value) {
                        if (value.length < 5) {
                            return '标题至少得5个字符啊';
                        }
                    },
                });
                form.on('submit(demo1)', function (data) {
                    layer.alert(JSON.stringify(data.field), {
                        title: '用户id为:{{d.user_id}}的提交信息'
                    });
                    return false;
                });
                /** 要使用render,复杂表单才能显示 */
                form.render();
            });
        </script>
    </div>
    </div>
</noscript>

<!-- 新增js -->
<script src="./js/index.js"></script>
<script src="./js/init.js"></script>
<script src="./js/state.js"></script>


</html>
